<template>
  <div class="form-container" >
    <el-tabs type="border-card">
      <p class="content-tit">查询条件</p>
      <el-form :label-position="labelPosition" label-width="100px" :model="formData">
        <el-row type="flex" class="row-bg">
          <el-col :span="8">
            <el-form-item label="印刷场">
              <el-input v-model="formData.printShopName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="征订规则">
              <el-select v-model="formData.checkedType2" filterable placeholder="请选择">
                <el-option
                  v-for="item in checkedTypeList2"
                  :key="item.code"
                  :label="item.codeName"
                  :value="item.code">
                  <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="8">
            <el-form-item label="印刷申请起期">
              <el-date-picker type="date" v-model="formData.startDate" placeholder="选择时间" :value-format="'yyyy-MM-dd'"
                              :format="'yyyy-MM-dd'"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="印刷申请止期">
              <el-date-picker type="date" v-model="formData.endDate" placeholder="选择时间" :value-format="'yyyy-MM-dd'"
                              :format="'yyyy-MM-dd'"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div align="right">
        <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="">清空</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加
        </el-button>
        <el-dialog title="" :visible.sync="dialogFormVisible" width="80%">
          <div>
            <p class="content-tit" align="left">查询条件</p>
            <el-form :label-position="labelPosition" label-width="100px" :model="formData">
              <el-row type="flex" class="row-bg">
                <el-col :span="8">
                  <el-form-item label="征订审批规则" size="mini">
                    <el-select v-model="formData.checkedType2" filterable placeholder="请选择">
                      <el-option
                        v-for="item in checkedTypeList2"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.code">
                        <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="征订开始日期" size="mini">
                    <el-date-picker type="date" v-model="formData.startDate" placeholder="选择时间"
                                    :value-format="'yyyy-MM-dd'"
                                    :format="'yyyy-MM-dd'"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="征订结束日期" size="mini">
                    <el-date-picker type="date" v-model="formData.endDate" placeholder="选择时间"
                                    :value-format="'yyyy-MM-dd'"
                                    :format="'yyyy-MM-dd'"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div>
              <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
            </div>
          </div>
          <div>
            <p class="content-tit" align="left">预印刷申请信息</p>
            <el-table :data="usersList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                      class='table-common' :highlight-current-row="true" border
                      v-show="isShowSingle">
              <el-table-column label="#" checked="selectionData"
                               type="selection"
                               min-width="6%">
              </el-table-column>
              <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
              <el-table-column label="征订批次号" min-width="10%" align="center"></el-table-column>
              <el-table-column label="征订机构" min-width="10%" align="center"></el-table-column>
              <el-table-column label="征订时间" min-width="10%" align="center"></el-table-column>
              <el-table-column label="审批规则" min-width="20%" align="center"></el-table-column>
              <el-table-column label="操作" min-width="14%" align="center"></el-table-column>
            </el-table>
            <div class="mar15 " align="right" v-show="isShowSingle">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="publicPage.currentPage"
                :page-size="publicPage.perPage"
                layout="total, prev, pager, next, jumper"
                :total="publicPage.totalSize">
              </el-pagination>
            </div>
            <div>
              <el-form :label-position="labelPosition" label-width="100px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="印刷厂编码" size="mini":required="true">
                      <el-select v-model="formData.checkedType2" filterable placeholder="请选择">
                        <el-option
                          v-for="item in checkedTypeList2"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.code">
                          <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="印刷厂名称" size="mini":required="true">
                      <el-select v-model="formData.checkedType2" filterable placeholder="请选择">
                        <el-option
                          v-for="item in checkedTypeList2"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.code">
                          <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

            </div>

            <el-button type="primary" @click="dialogFormVisible = false,add" size="small">添加</el-button>
          </div>

        </el-dialog>
        <el-button type="danger" @click="deleted" icon="el-icon-delete">删除</el-button>
      </div>
      <div>
      <p class="content-tit">
        <span @click="isShow('isShowSingle')" v-if='isShowSingle'>-</span>
        <span @click="isShow('isShowSingle')" v-else>+</span>印刷申请列表
      </p>
      <el-table :data="usersList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                class='table-common' :highlight-current-row="true" border
                v-show="isShowSingle">
        <el-table-column label="#" checked="selectionData"
                         type="selection"
                         min-width="6%">
        </el-table-column>
        <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
        <el-table-column label="印刷订单号" min-width="10%" align="center"></el-table-column>
        <el-table-column label="印刷状态" min-width="8%" align="center"></el-table-column>
        <el-table-column label="印刷厂编码" min-width="10%" align="center"></el-table-column>
        <el-table-column label="印刷名称" min-width="10%" align="center"></el-table-column>
        <el-table-column label="征订批次号" min-width="10%" align="center"></el-table-column>
        <el-table-column label="征订规则" min-width="16%" align="center"></el-table-column>
        <el-table-column label="征订机构" min-width="10%" align="center"></el-table-column>
        <el-table-column label="征订机构名称" min-width="10%" align="center"></el-table-column>
        <el-table-column label="征订日期" min-width="8%" align="center"></el-table-column>
        <el-table-column label="操作" min-width="10%" align="center"></el-table-column>
      </el-table>
      <div class="mar15 " align="right" v-show="isShowSingle">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="publicPage.currentPage"
          :page-size="publicPage.perPage"
          layout="total, prev, pager, next, jumper"
          :total="publicPage.totalSize">
        </el-pagination>
      </div>
      <div align="right">
        <el-button type="primary" @click="">生成订单</el-button>
      </div>
    </div>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "print-order",
    data() {
      return {
        dialogFormVisible: false,
        isShowSingle: true,
        dialogTableVisible: false,
        labelPosition: 'right',
        formData: {
          printShopName: '',
          checkedType2: '',
          startDate: '',
          endDate: ''
        },
        checkedTypeList2: [{code: '1', codeName: '支公司 -> 分公司 -> 总公司'}, {code: '2', codeName: '分公司 -> 总公司'}],
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        publicPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        planApplyList: [],
        applyList: []
      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val
      },
      handleCurrentChange(num) {
        this.selfFormData.pageNum = num
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
    }
  }
</script>

<style scoped>

</style>
